{% extends 'news/base_news.html' %}

{% block title %}新闻详情{% endblock %}

{% block style %}
    {% load static %}
    <link rel="stylesheet" href="{% static 'news/css/base_news.css' %}">
    <link rel="stylesheet" href="{% static 'news/css/news_xq.css' %}">


{% endblock %}


{% block l_left %}

    <form action="{% url 'news:news_xq' %}" method="post">
    {% csrf_token %}
        <div class="l_top">
            <div></div><span>新闻-新闻详情</span>
        </div>
        <div class="l_down">
            <div class="new">

                <p>{{ new_art.title }} </p>
                <p>
                    {{ new_art.digist }}
                    |
                    <span>{{ new_art.distribute_time|date:"Y-m-d" }}</span>
                    <span id="fx"><img src="{% static 'news/media/xiaochengxu/k_02@2x.png' %}"> <b>{{ new_art.share_count }}</b> </span>
                    <a><img src="{% static 'news/media/xiaochengxu/k_03@2x.png' %}">{{ new_art.votes_count }}</a>
                </p>
                <div></div>
                <p class="aa">{{ new_art.content }}</p>

            </div>


            <div class="l2_down">
                <span>本文由入住XXX的作者撰写,观点仅代表作者本人,绝不代表可牛赞同其观点或证实其描述.</span>
            </div>


            <div class="l3_down">
                <div class="ima"><img src="{% static 'news/media/xiaochengxu/z_n@2x.png' %}"> <span id="dz">{{  new_art.view_count }}</span> </div>
                <div class="share"><img src="{% static 'news/media/xiaochengxu/f@2x.png' %}"> </div>

            </div>


        </div>

    </form>

    <button class="comment">评论</button>
            <div class="com-anima" style="display: block">
                <input type="hidden" id="hidden" value="{{ new_art.id }}">
                <input type="text" name="content" placeholder="请输入评论" class="anima-input" maxlength="100" required><span class="show_code"></span>
                <button class="anima-btn">确认</button>
                <button class="off">取消</button>
            </div>
{% endblock %}


{% block n_right %}
    <div class="n_right">
        <p></p>
        <img src="/static/news/media/1.jpg">
        <span class="sao">扫码小程序</span>
        <span class="zhang">掌上轻松阅读>></span>
    </div>
{% endblock %}


{% block n_down %}
    <form action="" method="post">
        <div class="n_down">
            <p></p>
            <a href=""><span>热门新闻</span></a>
            <div class="n1_down">
                <div class="swiper-container left">
                    <div class="swiper-wrapper">
                        {% for article in art_list %}
                                 <div class="swiper-slide"><img src="{% url 'media' article.image %}"></div>
                        {% endfor %}
                    </div>
                    <div class="n2_down">
                        <span>去香港，收割一个时代</span>
                    </div>
                </div>
            </div>
            <ul class="n3_down">
                {% for article in art_list %}
                    <li>
                        <img class="art1" src="{% url 'media' article.image %}">
                        <p class="art3"><a href="{% url 'news:news_xq' %}?news_id={{ article.id }}">{{ article.content|striptags }}</a></p>
                        <p class="art6">{{ article.distribute_time|date:'Y-m-d' }}</p>
                    </li>
                {% endfor %}
            </ul>
        </div>

    </form>

{% endblock %}

{% block js %}
    <script>
        var mySwiper = new Swiper ('.swiper-container', {
            {#direction: 'vertical', // 垂直切换选项#}
            loop: true, // 循环模式选项
            autoplay:true,//等同于以下设置

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });


        $('.btn>button').click(function () {
            $('.content').html('');
            status = $(this).attr('a');
            $('.btn>button').prop('class', '');
            $(this).prop('class', 'active');
            $.ajax({
                url: "{% url 'news:news_list' %}?status=" + status,
                success: function(data) {
                    loadDataAndShow(data);
                },
                error: function (e) {
                    console.log(e);
                }
            });


            function loadDataAndShow(data) {
                if (!$.isArray(data)) return;
                data.forEach(function (e, index) {
                    li = $('<li/>');
                    img = $('<img/>');
                    img.attr("src","{% url 'media' '' %}"+ e.image).addClass('art1');
                    h3 = $('<h3/>').html(e.title).addClass('art2');
                    p1 = $('<p/>').html(e.content).addClass('art3');
                    p2 = $('<p/>').html(e.digist).addClass('art5');
                    {#console.log(e.distribute_time);#}
                    time = e.distribute_time.split('T')[0];
                    p3 = $('<p/>').html(time).addClass('art6');
                    li.append(img,h3,p1,p2,p3);
                    $('.content').append(li);
                });
            }
        });


       {#点赞#}
        $('.l3_down>.ima').click(function () {
            var x = {'num':1,'new_art_id':{{ new_art.id }}};
            var xhr = new  XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (this.readyState===4){
                    $('#dz').html(this.responseText)
                }
            };
            xhr.open("POST", '/news/dz/', true);
            xhr.setRequestHeader('content-type', 'text/json,utf-8');
            xhr.send(JSON.stringify(x));
        });



        {#分享#}
        $('.l3_down>.share').click(function () {
            var x = {'num':2,'new_art_id':{{ new_art.id }}};
            var xhr = new  XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (this.readyState===4){
                    $('#fx').html(this.responseText)
                }
            };
            xhr.open("POST", '/news/dz/', true);
            xhr.setRequestHeader('content-type', 'text/json,utf-8');
            xhr.send(JSON.stringify(x));
        });


        {##}
        {# 评论 #}
        $('.comment').click(function () {
            $(this).toggleClass('comm-btn');
            $('.com-anima').toggle();
        });
        {# 取消 #}
        $('.off').click(function () {
           $('.com-anima').hide();
        });

        {# 评论字数限制 #}
        $('.anima-input').focus(function () {
            $(this).textlimit('.show_code', 100);
        });

        {# 确认 #}
        $('.anima-btn').click(function () {
           $('.com-anima').hide();
           var ca = $('#hidden').val();
           var content = $('.anima-input').val();
           console.log(ca);
           console.log(content)
           $.ajax({
               type: "post",
               url: "{% url 'news:comm'%}",
               data: {'ca': ca, 'content':content},
               success: function (data) {
                   alert(data.suce);
               },
           });
        });


        $('.anima-btn').click(function () {
            var ca = $('#hidden').val();
            var content = $('.anima-input').val();
            $.ajax({
               type: 'POST',
               url: '{% url "news:xxtz" %}',
               data: {'ca':ca, 'content':content},
               success:function () {

               }
           }) ;
        });
    </script>

{% endblock %}